<template>
    <div class="own_banner" :style="{
        'background-image': 'url(' + require('../assets/img/banner.webp') + ')',
    }">
        <div class="own_info">
            <img class="own_pic" :src="this.$store.state.user.userPicPath == null ? require('@/assets/img/avatar.png')
            : this.$store.state.user.userPicPath" alt="" />
            <strong>{{ this.$store.state.user.nickname }}
                <img src="../assets/img/male.png" v-if="sex_icon == '男'" alt="" class="own_gender" />
                <img src="../assets/img/female.png" alt="" class="own_gender" v-if="sex_icon == '女'" />
            </strong>
            <small>{{ this.$store.state.user.description }}</small>
        </div>
    </div>
    <el-empty description="你还没有登录" v-if="!isLogin" />
    <el-tabs type="border-card" class="demo-tabs" v-if="isLogin">
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <calendar />
                    </el-icon>
                    <span class="tabs_span">贴文</span>
                </span>
            </template>
            <own-article-component />
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <Message />
                    </el-icon>
                    <span class="tabs_span">消息</span>
                </span>
            </template>
            <own-notice-component />
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <PieChart />
                    </el-icon>
                    <span class="tabs_span">问卷</span>
                </span>
            </template>
            Config</el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <MagicStick />
                    </el-icon>
                    <span class="tabs_span">活动</span>
                </span>
            </template>
            <own-activity-component />
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <Star />
                    </el-icon>
                    <span class="tabs_span">收藏</span>
                </span>
            </template>
            Role</el-tab-pane>
        <!-- <el-tab-pane label="历史">Role</el-tab-pane> -->
        <el-tab-pane>
            <template #label>
                <span class="custom-tabs-label">
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <span class="tabs_span">设置</span>
                </span>
            </template>
            <own-setting-component />
        </el-tab-pane>
    </el-tabs>
</template>
<script>
import OwnSettingComponent from './own/OwnSettingComponent.vue';
import OwnArticleComponent from './own/OwnArticleComponent.vue';
import OwnNoticeComponent from './own/OwnNoticeComponent.vue';
import OwnActivityComponent from './own/OwnActivityComponent.vue';
export default {
    components: { OwnSettingComponent, OwnArticleComponent, OwnNoticeComponent, OwnActivityComponent },
    data() {
        return {
            sex_icon: null,
            isLogin: false
        }
    },
    created() {
        this.$store.dispatch("updateUser").then(() => {
            let sex = this.$store.state.user.sex
            this.isLogin = this.$store.state.user.isLogin == undefined
            if (sex == undefined || sex == '保密') return
            this.sex_icon = sex
        });
    }
}
</script>
<style scoped>
.own_banner {
    height: 250px;
    display: flex;
    background-size: 100%;
    background-position: center;
}

.own_info {
    margin: auto;
    height: 100%;
    padding: 20px;
    width: 350px;
    flex-wrap: wrap;
    flex-direction: column;
    /* border: 1px solid red; */
    display: flex;
    text-align: center;
}

.own_pic {
    height: 100px;
    width: 100px;
    margin: 0px auto;
    border-radius: 50%;
    border: 2px solid white;
}

.own_gender {
    width: 25px;
    height: 25px;
}

.tabs_span {
    /* font-size: 20px; */
    margin-left: 10px;
}

.own_banner .el-tabs__nav-scroll {
    display: flex;
    justify-content: center;
}

.own_banner .el-tabs__nav {
    float: none;
    transform: none;
    position: static;
}
</style>